import {PlusOutlined} from '@ant-design/icons';
import {Button, Divider, message, DatePicker, Drawer, InputNumber, Select, Form, Modal} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import React, {useState, useRef, useEffect} from 'react';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import ProcessStatisticsForm from './components/ProcessStatisticsForm';
import {
  queryProductionStats,
  exportProductionStats,
  assignedToMeProcessOnline,
  myAssignedProcessOnline, allProcessOnline
} from '@/services/process';
import moment from "moment";


const TableList = () => {
  const [createModalVisible, handleModalVisible] = useState(false);
  const [formTitle, setFormTitle] = useState('新增采购申请');
  const actionRef = useRef();
  const [formRef] = Form.useForm();
  const [row, setRow] = useState();
  const [selectedRowsState, setSelectedRows] = useState([]);
  const { RangePicker } = DatePicker;
  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      hideInForm: true,
      hideInSearch: true,
      render: (text, record, index, action) => {
        return `${index + 1}`
      }
    },
    {
      title: '日期',
      dataIndex: 'dataDate',
      sorter: true,
      hideInForm: true,
      renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
        return (
          <RangePicker />
        )
      },
    },
    {
      title: '产品编码',
      dataIndex: 'productCode',
      hideInForm: true,
      copyable: true,
    },
    {
      title: '工艺段',
      dataIndex: 'processName',
      hideInSearch: true
    },
    {
      title: '生产数量',
      dataIndex: 'productNum',
      sorter: true,
      hideInSearch: true,
    },
    {
      title: '不良数量',
      dataIndex: 'defectNum',
      sorter: true,
      hideInSearch: true,
    },
    {
      title: '不良率',
      dataIndex: 'defectRatio',
      sorter: true,
      hideInSearch: true,
      render: (text, record)=>{
        return (text * 100).toFixed(2) + '%'
      }
    },
    {
      title: '报废数量',
      dataIndex: 'scrapNum',
      sorter: true,
      hideInSearch: true,
    },
    {
      title: '报废率',
      dataIndex: 'scrapRatio',
      sorter: true,
      hideInSearch: true,
      render: (text, record)=>{
        return (text * 100).toFixed(2) + '%'
      }
    },
  ];
  const tableRef = useRef();
  useEffect(() => {
    tableRef.current?.setFieldsValue({
      dataDate: [moment().subtract(6, "days"), moment()],
    });
    tableRef.current?.submit();
  });
  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        formRef={tableRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        request={async (params, sorter, filter) => {
          const param = params.dataDate ?{
            ...params,
            pageNum: params.current,
            startDate: params.dataDate[0],
            endDate: params.dataDate[1],
          }:{...params, pageNum: params.current};
          const res = await queryProductionStats(param)
          return {
            data: res.result.records,
            success: true,
            total: res.result.total
          }
        }}
        columns={columns}
      />

    </PageContainer>
  );
};

export default TableList;
